<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 语法： () => {}
    // () 和 => 之间不能换行
    // => 是由一个 =和>组合而成的，中间不能有空格
    // => 和 {} 之间能换行


    // 写法特点：
    // 形参如果只有一个，可以省略小括号
    // 函数体只有一行代码，可以省略大括号，并且自带 return 效果

    // let fn = x => x * x;
    // console.log(fn(5))


    // 其他特点：1. 函数内没有arguments对象。可以使用剩余参数获取全部的实参
    // let fn = (...c) => {
    //   // console.log(arguments); // 报错
    //   console.log(c); // [3, 2, 1, 9, 7]
    // }

    // fn(3, 2, 1, 9, 7);


    // 其他特点：2. 箭头函数内部没有自己的this; 使用this需要向查找普通变量那样去查找

    // 之前的this
    // 普通函数中的this ==> window
    // 定时器中的this ==> window
    // 自调用函数中的this ==> window
    // obj.fn() 里面的this ==> obj对象
    // 事件处理函数中this ==> 事件源
    // 构造函数中的this ==> 实例对象

    let obj = {
      fn1: function () {
        setTimeout(function () {
          console.log(this); // window
        }, 1000)
      },
      fn2: function () {
        // 这里的this指向谁？ ===> obj对象
        setTimeout(() => {
          console.log(this); // obj对象
        }, 1000)
      }
    }

    // obj.fn1(); // 
    obj.fn2(); //


    // 其他特点：3. 箭头函数不能当做构造函数
  </script>
</body>

</html>